<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>6. Editor with Dark Theme</title>
    <link rel="stylesheet" href="./css/tuidoc-example-style.css" />
    <!-- Editor -->
    <link rel="stylesheet" href="../dist/cdn/toastui-editor.css" />
    <!-- Dark theme -->
    <link rel="stylesheet" href="../dist/cdn/theme/toastui-editor-dark.css" />
  </head>
  <body style="background: #111">
    <div class="tui-doc-description">
      <strong
        >The example code can be slower than your environment because the code is transpiled by
        babel-standalone in runtime.</strong
      >
    </div>
    <div class="code-html tui-doc-contents">
      <!-- Editor -->
      <h2 style="color: #fff">Editor</h2>
      <div id="editor"></div>
      <!-- Viewer Using Editor -->
      <h2 style="color: #fff">Viewer</h2>
      <div id="viewer"></div>
    </div>
    <!-- Added to check demo page in Internet Explorer -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <script src="./data/md-default.js"></script>
    <!-- Editor -->
    <script src="../dist/cdn/toastui-editor-all.js"></script>
    <script type="text/babel" class="code-js">
      const { Editor } = toastui;

      const editor = new Editor({
        el: document.querySelector('#editor'),
        previewStyle: 'vertical',
        height: '500px',
        initialValue: content,
        theme: 'dark'
      });

      const viewer = Editor.factory({
        el: document.querySelector('#viewer'),
        viewer: true,
        height: '500px',
        initialValue: content,
        theme: 'dark'
      });
    </script>
  </body>
</html>
